<template>
  <div class="lessons-list">
    <el-dialog title="补课" :visible.sync="visible" @close="handleClose">
      <div class="leave_cont">
        <el-row>
          <el-col :span="2">补课人:</el-col>
          <el-col :span="22">{{makeup.name}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="2">缺课课程:</el-col>
          <el-col :span="22">
            <div v-if="crruid != 0">
              <span v-for="item in train_student_make_up" :key="item.id" v-if="item.courseId == crruid">{{item.courseName}} ( 缺课 {{item.waitMakeupCount}} 课时)</span>
              <p v-else>该课程无缺课记录</p>
            </div>
            <el-select v-model="selectedList" placeholder="请选择补课课程" v-else style="width: 50%;"  size="small">
              <el-option v-for="item in train_student_make_up" :key="item.id" :value="item.courseName" :label="`${item.courseName}( ${'缺课'} ${item.waitMakeupCount} ${'课时'} )`">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row v-if="selectedList || crruid != 0">
          <el-col :span="2">补课课程:</el-col>
          <el-col :span="22">
            <el-cascader
              ref="cascader"
              style="width: 50%;"
              :options="optionsTree"
              placeholder="请选择补课课程/校区/班级"
              @change="handleCourseChange"
              @active-item-change="handleItemChange" size="small">
            </el-cascader>
          </el-col>
        </el-row>
        <el-row v-if="selectedClass.length===3">
          <el-col :span="2">选择时地:</el-col>
          <el-col :span="22" v-if="train_makeup__course_info.length===0">暂无可选课程</el-col> 
          <el-col :span="22" v-else>
            <el-scrollbar class="import_table" wrap-class="makeup-scroll">
              <el-checkbox-group v-model="checkTime">
                <el-checkbox v-for="item in train_makeup__course_info" :key="item.id" :label="item.id">
                  {{new Date(item.beginDate).format('yyyy.MM.dd')}} {{item.weekCode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}} {{item.address}}
                </el-checkbox>
              </el-checkbox-group>
            </el-scrollbar>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit"  :disabled="checkTime.length == 0">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  props: {
    makeup: {
      type: Object
    },
    crruid: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters({
      train_student_make_up: 'train_student_make_up', // 学员缺课信息
      train_selectclass_list: 'train_selectclass_list', // 所有课程
      train_makeup__course_info: 'train_makeup__course_info' // 课程的课时信息
    })
  },
  data () {
    return {
      visible: true,
      selectedList: '',
      selectedClass: [],
      checkTime: [],
      optionsTree: [],
      classesId: '',
      courseId: '',
      schoolId: '',
      classId: ''
    }
  },
  created () {
    this.$store.dispatch('train_student_make_up', {studentId: this.makeup.id ? this.makeup.id : this.makeup.studentId})
    this.$store.dispatch('train_selectclass_list')
  },
  watch: {
    train_selectclass_list (value) {
      this.optionsTree = value.map((item, index) => {
        return {
          value: item.id,
          label: item.courseName,
          children: []
        }
      })
    },
    train_student_make_up (value) {
      this.classId = value[0].classId
    }
  },
  methods: {
    handleClose () {
      this.$emit('input', false)
    },
    handleItemChange (value) {
      if (value.length === 1) {
        trainApi.getSchoolList({courseId: value[0]}).then(res => {
          value.forEach(i => {
            this.optionsTree.forEach(item2 => {
              if (i === item2.value) {
                item2.children = res.data.length ? res.data.map(item3 => {
                  return {
                    value: item3.key,
                    label: item3.value,
                    children: []
                  }
                }) : []
              }
            })
          })
        })
      } else if (value.length === 2) {
        trainApi.getClasstypeList({courseId: value[0]}).then(res => {
          value.forEach(i => {
            this.optionsTree.forEach(item2 => {
              if (i === item2.value) {
                item2.children.forEach(item3 => {
                  item3.children = res.data.length ? res.data.map(item3 => {
                    return {
                      value: item3.key,
                      label: item3.value
                    }
                  }) : []
                })
              }
            })
          })
        })
      }
    },
    handleCourseChange (value) {
      this.selectedClass = value
      this.courseId = value[0]
      this.schoolId = value[1]
      this.classesId = value[2]
      this.$store.dispatch('train_makeup__course_info', {
        courseId: this.courseId,
        schoolId: this.schoolId,
        classesId: this.classesId,
        studentId: this.makeup.id ? this.makeup.id : this.makeup.studentId,
        classId: this.classId
      })
    },
    handleSubmit () {
      let obj = {
        classId: this.classId,
        classScheduleIdList: this.checkTime,
        studentId: this.makeup.id ? this.makeup.id : this.makeup.studentId
      }
      trainApi.putMakeup(JSON.stringify(obj), {content: this, successMsg: '补课成功'}).then(res => {
        this.$emit('success').$emit('input', false)
      })
    }
  }
}
</script>

<style lang="scss">
.lessons-list{
  .el-dialog--small{
    min-width: 850px;
  }
  .el-checkbox-group{
    width: 100%;
  }
  .el-checkbox-group .el-checkbox{
    width: 45%;
    margin-right: 3%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }
  .el-col{
    line-height:36px;
  }
  .el-dialog__footer{
    text-align: center;
    padding-bottom:25px;
  }
  .makeup-scroll{
    max-height:330px;
    overflow-y: scroll;
  }
}
</style>
